<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>百度首页</title>
	<style type="text/css">
		*{margin:0px;padding: 0px;box-sizing: border-box;}
		html,body{width: 100%;height: 100%;}
		#headerDiv{
			height: 50px;
			width: 100%;
			line-height: 50px;
			vertical-align: middle;
		}

		ul#topMenu{
			list-style: none;
			float: right;
			margin-right:8px;
			margin-top:8px;
		}
		ul#topMenu li{
			float: left;
			margin-right:15px;
			font-size:14px;
			cursor:pointer;
		}
		ul#topMenu li:hover{
			color:#00c;
		}

		#containerDiv{
			width:100%;
			height:calc( 100% - 50px - 100px - 20px);
			margin-top:20px;
		}
		#footerDiv{
			width: 100%;
			height:100px;
		}

		.searchBtn{
			width:100px;
			height:35px;
			line-height:35px;
			vertical-align:middle;
			background-color:#3385ff;
			color:#ffffff;
			display:block;
			float:left;
		}
		.searchBtn:hover{
			background-color:#317ef3;
			cursor:pointer;
		}
	</style>
</head>
<body>
	<div style="width:100%;height:100%;">
		<div>
			<div id="headerDiv">
				<ul id="topMenu">
					<li>新闻</li>
					<li>hao123</li>
					<li>地图</li>
					<li>视频</li>
					<li>贴吧</li>
					<li>学术</li>
					<li>登录</li>
					<li>设置</li>
					<li>更多产品</li>
				</ul>
			</div>
			<div id="containerDiv">
				<div style="width:100%;height:50%;text-align:center;">
					<img src="bd_logo1.png" width="270">
				</div>
				<div style="width:100%;height:50%;text-align:center;margin-top:20px;padding-left:calc( 22% + 50px );">
					<input style="width:56%;height:35px;padding-left:10px;padding-right:10px;float:left;" />
					<span class="searchBtn">百度一下</span>
				</div>
				<div>

				</div>


			</div>
			<div id="footerDiv">

			</div>
		</div>
	</div>
</body>
</html>
